<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-form ref="form" label-width="160px" id="searchOrder">
					<el-form-item label="品    牌:">
						<el-select v-model="value5" multiple placeholder="请选择" style="width:98%">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="属    性:">
						<div>
							<el-radio v-model="radio8" label="1" border size="medium" style="margin-left:10px;">备选项1</el-radio>
							<el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>
						</div>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row :gutter="2">
			<el-col :span="24">
				<div class="order-border">
					<el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column label="产品详细">
							<template slot-scope="scope">{{ scope.row.productInfo }}</template>
						</el-table-column>
						<el-table-column prop="marketValue" label="市场价" width="120">
							<template slot-scope="scope">￥{{ scope.row.marketValue }}</template>
						</el-table-column>
						<el-table-column prop="unitPrice" label="单价" width="100">
							<template slot-scope="scope">￥{{ scope.row.unitPrice }}</template>
						</el-table-column>
						<el-table-column label="渠道" width="100">
							<template slot-scope="scope">
								<el-tag type="success">现货</el-tag>
								<p></p>
								<el-tag type="danger">期货</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="数量" width="140">
							<template slot-scope="scope">
								<el-input-number :min="0" size="mini" v-model="scope.row.count"></el-input-number>
								<p></p>
								<el-input-number :min="0" size="mini" v-model="scope.row.countNoExist"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column label="购买" width="120">
							<template slot-scope="scope">
								<el-button size="mini" type="success" @click="addData(scope.$index, scope.row)">加入购物车</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div style="margin-top: 20px">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
						 :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
						</el-pagination>
					</div>
					<div style="margin: 10px 20px;text-align: right; color: red;">
						*注:期货可能有1至3周的配货期，请知悉
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value5: [],
				value11: [],
				radio8: "",
				tableData3: [{
					productInfo: '2016-05-03',
					name: '王小虎',
					marketValue: 109.89,
					unitPrice: 99.89,
					productExist: 1,
					countNoExist: 0,
					count: 100
				}, {
					productInfo: '2016-05-02',
					name: '王小虎',
					marketValue: 109.89,
					unitPrice: 99.89,
					productExist: 1,
					countNoExist: 0,
					count: 100
				}, {
					productInfo: '2016-05-04',
					name: '王小虎',
					marketValue: 109.89,
					unitPrice: 99.89,
					productExist: 1,
					countNoExist: 0,
					count: 100
				}, {
					productInfo: '2016-05-01',
					name: '王小虎',
					marketValue: 109.89,
					unitPrice: 99.89,
					productExist: 1,
					countNoExist: 0,
					count: 100
				}, {
					productInfo: '2016-05-08',
					name: '王小虎',
					marketValue: 109.89,
					unitPrice: 99.89,
					productExist: 1,
					countNoExist: 0,
					count: 100
				}, {
					productInfo: '2016-05-06',
					name: '王小虎',
					marketValue: 109.89,
					unitPrice: 99.89,
					productExist: 1,
					countNoExist: 0,
					count: 100
				}, {
					productInfo: '2016-05-07',
					name: '王小虎',
					marketValue: 109.89,
					unitPrice: 99.89,
					productExist: 1,
					countNoExist: 0,
					count: 100
				}],
				multipleSelection: [],
				filterText: '',
				headstyle: 'order-head',
				
				currentPage4: 4
			}
		},
		methods: {
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			addData(index, row) {
				console.log(index, row);
			}
		},
		watch: {
			filterText(val) {
				this.$refs.tree2.filter(val);
			}
		},
	}
</script>

<style>
	.order-border {
		border: #00AB42 1px solid;
		padding: 5px;
	}

	.order-head {
		color: #008800;
		font-size: 16px;
		font-weight: 400;
	}

	#searchOrder .el-form-item__label {
		height: 40px;
		background-color: #f3f3f3;
		margin-top: 3px;
	}

	#searchOrder .el-select{
		margin-left: 10px;
	}

	#searchOrder .el-radio:first {
		margin-left: 10px;
	}

	#searchOrder .el-radio--medium.is-bordered {
		padding: 6px 20px 0 10px;
		border-radius: 4px;
		height: 36px;
	}

	#searchOrder .el-tag--small {
		line-height: 18px;
	}
	
	#searchOrder .el-form-item {
		margin-bottom: 5px;
		padding-bottom:5px;
		border-bottom:#EBEFF6 1px solid;
	}
</style>
